/**
 * 路段管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>路段管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="search" class="user-search">
      <el-form-item>
        <el-input
          size="medium"
          v-model="search.secName"
          placeholder="路段名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          size="medium"
          v-model="search.insName"
          placeholder="巡检员"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          size="medium"
          v-model="search.reservedInt"
          placeholder="所属地区"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-select size="small" v-model="formInline.payType" placeholder="请选择">
          <el-option v-for="type in payType" :label="type.key" :value="type.value" :key="type.value"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="selectAllorByLike"
          >搜索</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="success" size="small" @click="dialog.addshow = true"
          >添加</el-button
        >
        <el-button type="success" size="small" @click="exportExcel">导出数据</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table
      size="small"
      :data="sectionList"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column align="center" type="index" width="60">
      </el-table-column>
      <el-table-column
        prop="secName"
        label="路段名称"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="secSpaceCount"
        label="车位数量"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="insName"
        label="巡检员"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="reservedVar"
        label="创建时间"
        width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="reservedInt"
        label="所属地区"
        width="120"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="selectBySec(scope.row.id)"
            >车位管理</el-button
          >
          <el-button size="mini" @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <el-button slot="reference" size="mini" type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="search.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="search.pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
    >
    </el-pagination>
    <!-- 添加 -->
    <el-dialog title="添加路段" :visible.sync="dialog.addshow" width="30%">
      <el-form :model="form">
        <el-form-item label="路段名称" :label-width="formLabelWidth">
          <el-input v-model="addForm.secName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车位数量" :label-width="formLabelWidth">
          <el-input
            :disabled="true"
            v-model="addForm.secSpaceCount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属地区" :label-width="formLabelWidth">
          <el-input v-model="addForm.reservedInt" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <span class="demonstration">选择创建时间</span>
            <el-date-picker
              v-model="addForm.reservedVar"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="选择巡检员" :label-width="formLabelWidth">
          <el-select v-model="addForm.insId" placeholder="请选择巡检员">
            <el-option
              v-for="(ins, index) in insList"
              :key="index"
              :label="ins.insName"
              :value="ins.insId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.addshow = false">取 消</el-button>
        <el-button type="primary" @click="addSection()">提 交</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改路段" :visible.sync="dialog.updateshow" width="30%">
      <el-form :model="form">
        <el-form-item label="路段名称" :label-width="formLabelWidth">
          <el-input v-model="updateForm.secName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车位数量" :label-width="formLabelWidth">
          <el-input
            :disabled="true"
            v-model="updateForm.secSpaceCount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属地区" :label-width="formLabelWidth">
          <el-input
            v-model="updateForm.reservedInt"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <span class="demonstration">选择创建时间</span>
            <el-date-picker
              v-model="updateForm.reservedVar"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="选择巡检员" :label-width="formLabelWidth">
          <el-select v-model="updateForm.insId" placeholder="请选择巡检员">
            <el-option
              v-for="(ins, index) in insList"
              :key="index"
              :label="ins.insName"
              :value="ins.insId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="updateSection()">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      sectionList: [],
      deptList: [],
      insList: [],
      loading: false,
      search: {
        currentPage: 1,
        pageSize: 5,
        secName: "",
        insName: "",
        reservedInt: "",
      },
      page: {
        total: 0,
        pageSizes: [1, 5, 10, 20, 50, 100],
      },
      dialog: {
        addshow: false,
        updateshow: false,
      },
      addForm: {
        secSpaceCount:0
      },
      updateForm: {},
    };
  },
  methods: {
    exportExcel() {      
      this.$axios
        .post("sections/exportExcel", this.search,{responseType: 'blob'})
        .then((res) => {
          let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名          
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let dom = document.createElement("a");
          dom.style.display = "none";
          dom.href = url;
          dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
          document.body.appendChild(dom);
          dom.click();
          // 释放内存
          dom.parentNode.removeChild(dom)
          window.URL.revokeObjectURL(dom.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    selectBySec(sid){
      this.$router.push({path:"/TSection/parking",query:{sid:sid}})
    },
    handleDelete(id) {
      this.$axios.delete("sections/" + id).then((res) => {
        if (res.data.success) {
          this.$message.success("删除成功");
          this.selectAllorByLike();
        }else if(!res.data.success){
          this.$message.error("删除失败");
        }
      
      // if(res.data.code == 400){
      //   alert(res.data.code)
      //   this.$message.error("删除失败");
      // }
    });
    },
    updateSection() {
      this.$axios.put("/sections", this.updateForm).then((res) => {
        if (res.data.code == 200) {
          this.dialog.updateshow = false;
          this.selectAllorByLike();
        }
      });
    },
    addSection() {
      this.$axios.post("/sections/add", this.addForm).then((res) => {
        if (res.data.code == 200) {
          this.dialog.addshow = false;
          this.selectAllorByLike();
        }
      });
    },
    loadIns() {
      this.$axios.post("/tinspector").then((res) => {
        this.insList = res.data.data.insList;
      });
    },
    selectAllorByLike() {
      this.$axios.post("/sections", this.search).then((res) => {
        this.sectionList = res.data.data.sectionList;
        this.page.total = res.data.data.total;
      });
    },
    handleSizeChange(val) {
      //每页数据改变
      this.search.pageSize = val;
      this.selectAllorByLike();
    },
    handleCurrentChange(val) {
      //点击页码
      this.search.currentPage = val;
      this.selectAllorByLike();
    },
    handleEdit(id) {
      this.dialog.updateshow = true;
      this.$axios.get("/sections/section/" + id).then((res) => {
        this.updateForm = res.data.data.section;
      });
    },
  },
  mounted() {
    this.selectAllorByLike();
    this.loadIns();
  },
};
</script>